<template>
    <div class="pr h-20" @click="change">
        <p :class="['pos-info f-12 h-20 flex-center-wrap', isActive ? 'allow' : 'limit']">
            {{ isActive ? `${successText}` : `${errorText}` }}
        </p>
        <klSwitch
            v-model="value"
            :active-color="activeColor"
            :inactive-color="inactiveColor"
            :default="[activeValue,inactiveValue]"
        ></klSwitch>
    </div>
</template>

<script>
import klSwitch from '@/mixins/components/kl-switch/index'
export default {
    components: {
        klSwitch,
    },
    props: {
        value: {
            type: String || Number || Boolean,
            default: false,
        },
        'active-color': {
            type: String,
            default: '#13ce66',
        },
        'inactive-color': {
            type: String,
            default: '#ff4949',
        },
        'active-value': {
            type: String || Number || Boolean,
            default: '1',
        },
        'inactive-value': {
            type: String || Number || Boolean,
            default: '2',
        },
        successText: {
            type: String,
            default: '启用',
        },
        errorText: {
            type: String,
            default: '禁用',
        },
    },

    data() {
        return {}
    },
    computed: {
        isActive() {
            return this.value === this.activeValue
        },
    },
    methods: {
        change() {
            let val = ''
            if (this.value === this.activeValue) {
                val = this.inactiveValue
            } else {
                val = this.activeValue
            }
            this.$emit('input', val)
            this.$emit('change', val)
        },
    },
}
</script>

<style lang="scss" scoped>
::v-deep {
    .el-switch__core {
        width: 52px !important;
        height: 21px;
    }
}
.pr {
    position: relative;
}
.pos-info {
    cursor: pointer;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0;
    color: #fff;
    z-index: 100;
    transform: all 1s;
}
.limit {
    padding-left: 5px;
}
.allow {
    padding-left: 20px;
}
</style>
